<template>
  <div>
    <!-- 顶部状态栏 -->
    <div class="detail_top_status_div" v-if="viewType!='add'" :class="serverData.statusClass">
      <img :src="'./static/img/'+serverData.statusImg">
      <span class="status_label">{{serverData.statusText}}</span>
    </div>
    <!-- end 顶部状态栏 -->
    <!-- 中间的div -->
    <div class="center_div">
      <flexbox class="detail_label_and_button">
        <flexbox-item>
          <h3 class="title">考核学生</h3>
        </flexbox-item>
        <flexbox-item align="right" v-if="view.isShowUserBtn&&submitData.stuList.length>0">
          <x-button type="primary" mini plain @click.native="toAddStu" class="dskt_btn">
            {{submitData.stuList.length}}人
            <icon type="enter"/>
          </x-button>
        </flexbox-item>
      </flexbox>
      <div class="box_border_dashed user_box div_magin10">
        <div class="img_list" v-if="submitData.stuList.length>0">
          <div class="img_box" v-for="(stu , index) in submitData.stuList" :key="index">
            <x-img :src="stu.headImg" :default-src="stu.headImg"></x-img>
            <div>{{stu.name}}</div>
          </div>
        </div>
        <div class="no_data_list" @click="toAddStu()" v-if="submitData.stuList.length==0">
          <img class="no_data_add_btn" :src="'./static/img/Icon-AddStudent.png'">
        </div>
      </div>

      <flexbox class="detail_label_and_button div_magin10">
        <flexbox-item>
          <h3 class="title">考核项目</h3>
        </flexbox-item>
        <flexbox-item align="right" v-if="view.isShowAddProjectBtn &&  viewType=='add' && submitData.itemList.length>0">
          <x-button type="primary" mini plain @click.native="toAddProject" class="dskt_btn">添加项目
            <icon type="add"/>
          </x-button>
        </flexbox-item>
      </flexbox>

      <div class="box_border_dashed project_box div_magin10">
        <ul class="kaidan_ul" v-if="submitData.itemList.length>0">
          <li
            class="right_li"
            v-for="(po,index) in submitData.itemList"
            :key="index"
            @click="doClickItem(index)"
          >
            <icon type="zhengque" :class="[po.checked ? 'color_primary' : 'color_unselect']"/>
            <div class="right_li_div">
              {{po.checkBigCateName+"-"+po.name}}
              <span
                class="zuoqinag_span"
                v-if="po.scoringRule==2"
              > : {{po.appropriateExplain}}</span>
              <span
                class="border_radus"
                :class="[po.scoringType==1 ? 'color_green' : 'color_red']"
              >{{ po.scoringType==1 ? '+'+po.points : '-' +po.points }}分</span>
            </div>
          </li>
        </ul>
        <div class="no_data_list" @click="toAddProject()" v-if="submitData.itemList.length==0">
          <img class="no_data_add_btn" :src="'./static/img/Icon-AddProject.png'">
        </div>
      </div>

      <flexbox class="detail_label_and_button div_magin10">
        <flexbox-item>
          <h3 class="title">考核凭证</h3>
        </flexbox-item>
      </flexbox>

      <div class="upload_img_list div_magin10">
        <flexbox :gutter="0">
          <flexbox-item :span="1/4" v-for="(img , index) in submitData.imgList" :key="index">
            <div class="upload_box upload_img">
              <img :src="img.src" @click="showBigImg(index)">
              <icon
                @click.native="deleteImg(index)"
                v-if="viewType=='add'"
                type="delete_fill"
                class="delete_img iconfont_no_margin"
              />
            </div>
          </flexbox-item>
          <flexbox-item :span="1/4" v-if="submitData.imgList.length<4 && viewType=='add'">
            <imgUpload
              @uploadOkEvent="uploadOkEvent"
              :defaultSrc="'./static/img/icon-AddPhoto.png'"
            ></imgUpload>
          </flexbox-item>
        </flexbox>
      </div>

       <template v-if="viewType!='add'">
        <flexbox class="detail_label_and_button div_magin10">
            <flexbox-item><h3 class="title">其他信息</h3></flexbox-item>
        </flexbox>

        <div class="box_border_dashed kd_info_box div_magin10">
            <flexbox :gutter="0" class="kd_info_list">
            <flexbox-item :span="4/5" >
                <span class="info_title">开单编号：</span><span>{{serverData.openOrder.no}}</span>
            </flexbox-item>
            <flexbox-item align="right">
                <input type="text" id="biao1" class="copy_input" readonly="readonly" v-model="serverData.openOrder.no">
                <span @click="doCopySelect('biao1')" class="label_copy">复制</span></flexbox-item>
            </flexbox>
            <template v-if="serverData.openOrder.openOrderState==0">
            <div class="kd_info_list" v-if="recallStateTime!=null && recallStateTime!=''"><span class="info_title">撤回时间：</span><span>{{recallStateTime}}</span></div>
            <div class="kd_info_list" v-if="recallReason!=null && recallReason!=''"><span class="info_title">撤回原因：</span><span>{{recallReason}}</span></div>
            </template>
            <div class="kd_info_list"><span class="info_title">考核时间：</span><span>{{serverData.openOrder.creTimeStr}}</span></div>
            <div class="kd_info_list"><span class="info_title">考核教师：</span><span>{{serverData.openOrder.operName}}</span><span @click="jSCallPhone($event)"  class="info_phone">{{serverData.openOrder.operCellphone}}</span></div>
        </div>
        </template>
    </div>

   
    <!-- end 中间的div -->
    <!-- 底部的按钮 -->
    <div class="buttom_div" v-if="viewType=='add'">
      <x-button type="primary" @click.native="doOk" class="dskt_btn">{{okText}}</x-button>
    </div>
    <div class="buttom_div" v-if="viewType!='add' && serverData.isShowCexiao">
      <x-button type="warn" @click.native="doCehui" class="dskt_btn">撤回</x-button>
    </div>

    <div>
      <previewer :list="submitData.imgList" ref="previewer"></previewer>
    </div>
    <selectReason @okEvent="selectReasonOkEvent" :nama="123" ref="selectReason"></selectReason>
    <!-- end 底部的按钮 -->
  </div>
</template>

<script>
import baseService from "../../shared/service/baseService";
import orderService from "../../shared/service/orderService";
import imgUpload from "../../components/imgUpload.vue";
import itemService from "../../shared/service/itemService";
import selectReason from "../../components/selectReason.vue";
import weixinService from "../../shared/service/weixinService";
const wx = require('weixin-js-sdk')
import { XImg, dateFormat,Previewer } from "vux";
export default {
  components: {
    XImg,
    Previewer,
    imgUpload,dateFormat,
    selectReason
  },
  data() {
    var data = {
      viewType: this.$route.query.viewType,
      id: this.$route.query.id,
      recallReason: this.$route.query.recallReason,
      recallStateTime: this.$route.query.recallStateTime,
      isCanClick:true,
    };
     if(data.recallStateTime){
      data.recallStateTime = dateFormat(this.$commonUtil.getDate(data.recallStateTime), 'YYYY-MM-DD HH:mm');
    }
    data.view = {
      isShowStatusDiv: false,
      isShowUserBtn: true,
      isShowAddProjectBtn: true
    };
    //通过这个来判断是否有值
    data.toNextViewOkFlag = "";
    data.toProjectViewOkFlag = "";
    data.submitData = {
      stuList: [],
      imgList: [], //
      itemList: []
    };
    data.serverData = {
      status: "sx",
      statusText: "生效",
      statusClass: "color_green", //color_grey  color_red  color_green
      statusImg: "icon-InForce.png",
      isShowCexiao: false,
      openOrder: {}
    };

    data.okText = "确认考核";
    return data;
  },
  mounted() {
     weixinService.initWx(wx);
    this.$dbUtil.setVal(this.$dbUtil.key.REFRUE_ORDER_VIEW,"true");
  },
  activated() {
     this.isCanClick=true;
    try{
    this.$refs.previewer.close();
    }catch(e){

    }
    this.recallReason = this.$route.query.recallReason;
    this.recallStateTime = this.$route.query.recallStateTime;
    if(this.recallStateTime){
      this.recallStateTime = dateFormat(this.$commonUtil.getDate(this.recallStateTime), 'YYYY-MM-DD HH:mm');
    }
    var isRefreshView = this.$dbUtil.getVal(this.$dbUtil.key.REFRUE_ORDER_VIEW);
    if (isRefreshView && isRefreshView == "true") {
      this.viewType = this.$route.query.viewType;
      if (this.viewType == "add") {
            document.title = '确认开单';
      }else{
            document.title = '开单详情';
      }
      this.id = this.$route.query.id;
      // location.reload();
      this.serverData.isShowCexiao = false;
      if (this.viewType == "update") {
        this.doGetData(this.id);
      } else {
        this.$vux.loading.show();
        setTimeout(() => {
          this.setNull();
        }, 300);
      }
      this.$dbUtil.setVal(this.$dbUtil.key.REFRUE_ORDER_VIEW, false);
    } else {
      var okFlag = this.$dbUtil.get(this.$dbUtil.key.SELECT_USER_VIEW);
      if (this.toNextViewOkFlag && this.toNextViewOkFlag == okFlag) {
        var list = this.$dbUtil.get(this.$dbUtil.key.SELECT_USER_LIST);
        this.submitData.stuList = list;
      }
      var okProjectFlag = this.$dbUtil.get(
        this.$dbUtil.key.SELECT_PROJECT_VIEW
      );
      if (
        this.toProjectViewOkFlag &&
        this.toProjectViewOkFlag == okProjectFlag
      ) {
        var list = this.$dbUtil.get(this.$dbUtil.key.SELECT_PROJECT_LIST);
        this.submitData.itemList = list;
      }
    }
  },
  methods: {
    setNull() {
      this.submitData.stuList = [];
      this.submitData.imgList = [];
      this.submitData.itemList = [];
      this.$vux.loading.hide();
    },
    doCopySelect(domId){
      var Url2=document.getElementById(domId);
      Url2.select(); // 选择对象
      Url2.setSelectionRange(0, Url2.value.length), document.execCommand('Copy');
      this.$vux.toast.text("已复制到剪贴板");
      return;
    },
    doGetData(id) {
      this.$vux.loading.show();
      orderService.getOpenOrder(id).then(res => {
        var data = res.data;
        if (data.openOrderState == 1 && data.canBack)
          this.serverData.isShowCexiao = true;
        for (let i = 0; i < data.studentList.length; i++) {
          let element = data.studentList[i];
          element.showAddress = this.$commonUtil.getUserAddress(element);
          element.checked = true;
        }
        this.submitData.stuList = data.studentList;
        var imgTempList = [];
        for (let i = 0; i < data.imgList.length; i++) {
          imgTempList.push({ src: data.imgList[i], h: 500 });
        }
        this.submitData.imgList = imgTempList;
        for (let i = 0; i < data.checkItemList.length; i++) {
          data.checkItemList[i].checked = true;
        }
        data.creTimeStr = dateFormat(this.$commonUtil.getDate(data.creTime), 'YYYY-MM-DD HH:mm');

        switch (data.openOrderState) {
          case 0:
            this.serverData.statusText = "撤回";
            this.serverData.statusClass = "color_grey"; //color_grey  color_red  color_green
            this.serverData.statusImg = "icon-recall.png";
            break;
          case 1:
            this.serverData.statusText = "生效";
            this.serverData.statusClass = "color_green"; //color_grey  color_red  color_green
            this.serverData.statusImg = "icon-InForce.png";
            break;
        }

        this.serverData.openOrder = data;
        
        this.submitData.itemList = data.checkItemList;
        this.$vux.loading.hide();
      });
    },
    uploadOkEvent(fileSrc) {
      this.submitData.imgList.push({ src: fileSrc, h: 500 });
    },
    doCehui() {
      this.$refs.selectReason.showCehui(this.serverData.openOrder.id);
    },
    doClickItem(index) {
      if (this.viewType == "add")
        this.submitData.itemList[index].checked = !this.submitData.itemList[
          index
        ].checked;
    },
    getImgUploadNum(){
        return 4-this.submitData.imgList.length;
    },
    doOk() {
      if (!this.isCanClick) {
        return;
      }
      if (this.submitData.stuList.length <= 0) {
        this.$vux.toast.text("请选择学生");
        return;
      }
      var subItem = [];
      for (let i = 0; i < this.submitData.itemList.length; i++) {
        const element = this.submitData.itemList[i];
        if(element.checked){
          if(element.scoringRule==2){
            if(element.points<element.appropriateFloor || element>element.appropriateTop){
                this.$vux.toast.text(element.name+" 分数 超出限制");
                return;
            }
          }
          subItem.push(element);
        }
      }
      if (subItem.length <= 0) {
        this.$vux.toast.text("请选择项目");
        return;
      }
      var subImgList = [];
      for (let i = 0; i < this.submitData.imgList.length; i++) {
        const img = this.submitData.imgList[i];
        subImgList.push(img.src);
      }
      if (this.viewType == "add") {
         this.isCanClick=false;
        this.$vux.loading.show();
        orderService
          .doOpenOrder(
            this.submitData.stuList,
            subItem,
            subImgList
          )
          .then(res => {
            this.isCanClick=true;
            this.$vux.loading.hide();
            this.$vux.toast.text("开单成功");
            this.$router.back(-1);
          }).catch((res) => {
                this.isCanClick=true;
            this.$vux.loading.hide();
             this.$vux.alert.show({
              title: '提示',
              content: res.data.message
            });
        });
      }
    },
    selectReasonOkEvent(id, text, type) {
      orderService.doBackState(id, text).then(res => {
        this.$vux.toast.text("已撤回");
        this.$router.back(-1);
      });
    },
    showBigImg(index) {
      this.$refs.previewer.show(index);
    },
    deleteImg(i) {
      this.submitData.imgList.splice(i, 1);
    },
    toAddStu() {
      this.toNextViewOkFlag = this.$commonUtil.getTimeKey();
      this.toProjectViewOkFlag="";
      this.$dbUtil.set(
        this.$dbUtil.key.SELECT_USER_LIST,
        this.submitData.stuList
      );
      this.$router.push({
        name: "selectStu",
        query: {
          toNextViewOkFlag: this.toNextViewOkFlag,
          viewType: this.viewType
        }
      });
    },
    toAddProject() {
      this.toNextViewOkFlag="";
      this.toProjectViewOkFlag = this.$commonUtil.getTimeKey();
      this.$dbUtil.set(
        this.$dbUtil.key.SELECT_PROJECT_LIST,
        this.submitData.itemList
      );
      this.$router.push({
        name: "selectProject",
        query: { toProjectViewOkFlag: this.toProjectViewOkFlag }
      });
    }
  }
};
</script>
<style scoped>
@import "../../assets/scss/order-detail.scss";
</style>
<style scoped>
.center_div {
  padding: 8px 8px;
}
.user_box {
  padding: 15px 15px;
}
.project_box {
  padding: 15px 15px;
}
.project_box .right_li {
  padding-bottom: 5px;
}
.buttom_div {
  background: rgba(242, 251, 254, 1);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08);
  padding: 15px 20%;
  margin-top: 30px;
}
</style>
